<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetism Diagram</title>
</head>
<body>
    <canvas id="physics-canvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physics-canvas');
        const ctx = canvas.getContext('2d');

        // Set a white background
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // --- Styles ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Helper function for custom arrows ---
        function drawCustomArrow(ctx, x, y, size, direction) {
            ctx.lineWidth = 1;
            ctx.beginPath();
            if (direction === 'down') {
                const tipY = y;
                const baseY = y - size;
                // Main V shape
                ctx.moveTo(x - size * 0.6, baseY);
                ctx.lineTo(x, tipY);
                ctx.lineTo(x + size * 0.6, baseY);
                // Small vertical line from tip
                ctx.moveTo(x, tipY);
                ctx.lineTo(x, tipY - size * 0.4);
            } else { // 'up'
                const tipY = y;
                const baseY = y + size;
                // Main V shape
                ctx.moveTo(x - size * 0.6, baseY);
                ctx.lineTo(x, tipY);
                ctx.lineTo(x + size * 0.6, baseY);
                // Small vertical line from tip
                ctx.moveTo(x, tipY);
                ctx.lineTo(x, tipY + size * 0.4);
            }
            ctx.stroke();
        }

        // --- Define Wire Parameters ---
        const wire_width = 25;
        const wire_height_start = 40;
        const wire_height_end = 460;
        
        const x_left = 100;
        const x_left_center = x_left + wire_width / 2;

        const x_right = 375;
        const x_right_center = x_right + wire_width / 2;

        // --- Draw Left Wire (Current Down) ---
        // Outer lines
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.moveTo(x_left, wire_height_start);
        ctx.lineTo(x_left, wire_height_end);
        ctx.moveTo(x_left + wire_width, wire_height_start);
        ctx.lineTo(x_left + wire_width, wire_height_end);
        ctx.stroke();

        // Center current line
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(x_left_center, wire_height_start);
        ctx.lineTo(x_left_center, wire_height_end);
        ctx.stroke();

        // Current arrows (down)
        const arrow_size = 12;
        for (let i = 0; i < 4; i++) {
            drawCustomArrow(ctx, x_left_center, 120 + i * 100, arrow_size, 'down');
        }

        // Label "I"
        ctx.font = 'bold 30px serif';
        ctx.fillText('I', x_left_center, wire_height_start - 20);

        // --- Draw Right Wire (Current Up) ---
        // Outer lines
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.moveTo(x_right, wire_height_start);
        ctx.lineTo(x_right, wire_height_end);
        ctx.moveTo(x_right + wire_width, wire_height_start);
        ctx.lineTo(x_right + wire_width, wire_height_end);
        ctx.stroke();

        // Center current line
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(x_right_center, wire_height_start);
        ctx.lineTo(x_right_center, wire_height_end);
        ctx.stroke();

        // Current arrows (up)
        for (let i = 0; i < 4; i++) {
            drawCustomArrow(ctx, x_right_center, 420 - i * 100, arrow_size, 'up');
        }

        // Label "I"
        ctx.font = 'bold 30px serif';
        ctx.fillText('I', x_right_center, wire_height_start - 20);
        
        // --- Draw Electron and Velocity Vector ---
        const x_center = (x_left + wire_width + x_right) / 2;
        const y_electron = 220;

        // Electron (as a filled octagon to match the original)
        const electron_radius = 7;
        ctx.lineWidth = 2;
        ctx.beginPath();
        for (let i = 0; i < 8; i++) {
            const angle = (Math.PI / 4) * i;
            const px = x_center + electron_radius * Math.cos(angle);
            const py = y_electron + electron_radius * Math.sin(angle);
            if (i === 0) ctx.moveTo(px, py);
            else ctx.lineTo(px, py);
        }
        ctx.closePath();
        ctx.fill();

        // Electron label "e⁻"
        ctx.font = 'bold 32px serif';
        ctx.fillText('e⁻', x_center, y_electron - 28);

        // Velocity vector line
        const y_v_start = y_electron + 12;
        const y_v_end = y_electron + 100;
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(x_center, y_v_start);
        ctx.lineTo(x_center, y_v_end);
        ctx.stroke();

        // Velocity vector arrowhead
        drawCustomArrow(ctx, x_center, y_v_end, 18, 'down');
        
        // Velocity label "v"
        ctx.font = 'bold 32px serif';
        ctx.fillText('v', x_center - 35, (y_v_start + y_v_end) / 2 + 10);

    </script>
</body>
</html>